<template>
  <div data-v-leftnav123 class="main">
    <section class="title"><span>Nobo</span></section>
    <section class="list" :class="[$route.path === '/home' ? 'active' : '']">
      <span data-name001="首页"
        ><router-link
          to="/"
          style="font-size: 38px"
          class="iconfont icon-home-fill"
        ></router-link
      ></span>
    </section>
    <section class="list" :class="[$route.path === '/sharp' ? 'active' : '']">
      <span data-name001="推荐"
        ><router-link
          to="/sharp"
          style="font-size: 38px"
          class="iconfont icon-good-fill"
        ></router-link
      ></span>
    </section>
    <section class="list" :class="[$route.path === '/post' ? 'active' : '']">
      <span data-name001="专栏"
        ><router-link
          to="/post"
          style="font-size: 38px"
          class="iconfont icon-feed-logo-fill"
        ></router-link
      ></span>
    </section>
    <section class="list" :class="[$route.path === '/music' ? 'active' : '']">
      <span data-name001="音乐"
        ><router-link
          to="/music"
          style="font-size: 38px"
          class="iconfont icon-service-fill"
        ></router-link
      ></span>
    </section>
    <section class="list" :class="[$route.path === '/game' ? 'active' : '']">
      <span data-name001="游戏"
        ><router-link
          to="/game"
          style="font-size: 38px"
          class="iconfont icon-salescenter-fill"
        ></router-link
      ></span>
    </section>
    <section class="list" :class="[$route.path === '/comic' ? 'active' : '']">
      <span data-name001="动漫"
        ><router-link
          to="/comic"
          style="font-size: 38px"
          class="iconfont icon-smile-fill"
        ></router-link
      ></span>
    </section>
    <section class="list" :class="[$route.path === '/foods' ? 'active' : '']">
      <span data-name001="生活"
        ><router-link
          to="/foods"
          style="font-size: 38px"
          class="iconfont icon-discount-fill"
        ></router-link
      ></span>
    </section>
  </div>
</template>

<script>
export default {
  name: "LeftNav",
  data: function () {
    return {};
  },

  methods: {},
};
</script>

<style lang="scss" scoped>
.main[data-v-leftnav123] {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  flex-direction: column;

  section {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .title {
    width: 100%;
    height: 120px;
    font-size: 3vh;
    font-weight: 700;
    // background-color: rebeccapurple;
  }

  .list:not(.active) {
    width: 100%;
    height: 110px;
    font-size: 22px;
    // background-color: skyblue;

    span {
      position: relative;
      font-size: 22px;

      a {
        opacity: 0.6;
        transition: all 1s;
        -webkit-transition: all 1s; /* Safari */
      }
    }

    span:before {
      position: absolute;
      bottom: 1.5em;
      width: 120px;
      content: attr(data-name001);
      opacity: 0;

      transition: all 1s;
      -webkit-transition: all 1s; /* Safari */
    }

    span::after {
      position: absolute;
      left: 50%;
      top: 2em;
      width: 6px;
      height: 6px;
      margin-left: -3px;
      content: "";
      background-color: #000;
      border-radius: 50%;
      opacity: 0;

      transition: all 2s;
      -webkit-transition: all 2s; /* Safari */
    }
  }

  .list:hover {
    span::before {
      bottom: 0;
      opacity: 1;
    }

    span::after {
      top: 1.8em;
      opacity: 1;
    }

    span {
      a {
        opacity: 0;
      }
    }
  }

  .active {
    width: 100%;
    height: 110px;
    font-size: 22px;
    // background-color: skyblue;

    span {
      position: relative;
      font-size: 22px;

      a {
        opacity: 0;
        transition: all 1s;
        -webkit-transition: all 1s; /* Safari */
      }
    }

    span:before {
      position: absolute;
      bottom: 0;
      width: 120px;
      content: attr(data-name001);
      opacity: 1;

      transition: all 1s;
      -webkit-transition: all 1s; /* Safari */
    }

    span::after {
      position: absolute;
      left: 50%;
      top: 1.8em;
      width: 6px;
      height: 6px;
      margin-left: -3px;
      content: "";
      background-color: #000;
      border-radius: 50%;
      opacity: 1;

      transition: all 2s;
      -webkit-transition: all 2s; /* Safari */
    }
  }
}
</style>